<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div id="abc" class="box" age="12" height="1.88">我是box</div>

		<input type="checkbox" name="" id="" checked="true" />

		<script>
			var boxEl = document.querySelector('#abc')

			// 1. 所有的attributes都支持的操作
			console.log(boxEl.hasAttribute('AFS'), boxEl.hasAttribute('abc'), boxEl.hasAttribute('id'))
			console.log(boxEl.getAttribute('AGG'), boxEl.getAttribute('abc'), boxEl.getAttribute('id'))

			boxEl.setAttribute('id', 'cba')
			boxEl.removeAttribute('id')

			var boxAttributes = boxEl.attributes
			for (var attr of boxAttributes) {
				console.log(attr.name, attr.value)
			}

			// 2. 通过getAttribute获取是字符串类型
			var inpEl = document.querySelector('input')
			console.log(typeof inpEl.getAttribute('checked'), inpEl.getAttribute('checked'))
		</script>
	</body>
</html>
